<template>
  <div class="books">
    <!-- 搜索框 -->
    <van-sticky>
      <div class="search_max">
        <!-- 跳转到搜索页面 -->
        <router-link :to="this.$store.state.phoneState?'/booksearch':'/login'">
          <div class="search">
            <div class="search_icon">
              <img src="../assets/img/search.png" />
            </div>
            <input type="text" placeholder="请输入图书名称" />
          </div>
        </router-link>
        <!-- 跳转到购物车 -->
        <router-link :to="this.$store.state.phoneState?'/trolley':'/login'">
          <div class="shopCart">
            <img src="../assets/img/shopCart1.png" />
          </div>
        </router-link>
      </div>
    </van-sticky>
    <!-- 书城标题 -->
    <h2>书城</h2>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, i) of cats" :key="i">
        <img :src="`${item.img}`" />
      </van-swipe-item>
    </van-swipe>
    <!-- 导航栏 -->
    <van-tabs
      v-model="actives"
      title-active-color="#222831"
      title-inactive-color="#C3C7CB"
      line-height="0"
      sticky
      :offset-top="38"
    >
      <!-- 综合 -->
      <van-tab title="综合" >
          <div class="row" v-for="(item, i) in api" :key="i" @click="bookdetail(item.bid)">
            <div class="row1">
              <img :src="item.pic" alt="" />
            </div>
            <div class="row2">
              <div class="row2-1">  
                <span>{{ item.title }}</span>
              </div>
              <div class="row2-2">
                <div>
                  <span>{{ item.orderNumber }}人购买</span>
                </div>
                <div class="row2-3">
                  <span style="text-decoration: line-through">￥65.8</span>
                  <span>￥{{ item.price }}</span>
                </div>
              </div>
            </div>
          </div>
      </van-tab>
      <!-- 销量 -->
      <van-tab title="销量">
        <div class="row" v-for="(item, i) in api" :key="i">
          <div class="row1">
            <img :src="item.pic" alt="" />
          </div>
          <div class="row2">
            <div class="row2-1">
              <span>{{ item.title }}</span>
            </div>
            <div class="row2-2">
              <div>
                <span>{{ item.orderNumber }}人购买</span>
              </div>
              <div class="row2-3">
                <span style="text-decoration: line-through">￥65.8</span>
                <span>￥{{ item.price }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <!-- 价格 -->
      <van-tab>
        <template #title>
          <span>价格</span>
          <img class="jiake" src="/book-dis/10.png" alt="" />
        </template>
        <div class="row" v-for="(item, i) in api" :key="i">
          <div class="row1">
            <img :src="item.pic" alt="" />
          </div>
          <div class="row2">
            <div class="row2-1">
              <span>{{ item.title }}</span>
            </div>
            <div class="row2-2">
              <div>
                <span>{{ item.orderNumber }}人购买</span>
              </div>
              <div class="row2-3">
                <span style="text-decoration: line-through">￥65.8</span>
                <span>￥{{ item.price }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <!-- 筛选 -->
      <van-tab>
        <template #title>
          <div @click="showPopup">
            筛选
            <img class="xuan" src="/book-dis/13.png" alt="" />
          </div>
        </template>
        <div class="row" v-for="(item, i) in shan" :key="i">
          <div class="row1">
            <img :src="item.pic" alt="" />
          </div>
          <div class="row2">
            <div class="row2-1">
              <span>{{ item.title }}</span>
            </div>
            <div class="row2-2">
              <div>
                <span>{{ item.orderNumber }}人购买</span>
              </div>
              <div class="row2-3">
                <span style="text-decoration: line-through">￥65.8</span>
                <span>￥{{ item.price }}</span>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 弹出层 -->
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', top: '50%' }">

      <!-- 第一行 -->
      <div class="div">
        <h5>学段选择</h5>
        <div class="div-1">
          <van-button @click="anlu"   type="primary" size="normal" >四级</van-button>
          <van-button @click="anlu"   type="primary" size="normal" >六级</van-button>
          <van-button @click="anlu"   type="primary" size="normal" >考研</van-button>
        </div>
        <div class="div-2">
          <van-button @click="anlu"   type="primary" size="normal" >专四</van-button>   
          <van-button @click="anlu"   type="primary" size="normal" >专八</van-button>      
        </div>
      </div>
    </van-popup>

    <!-- 底部选项卡 -->
    <van-tabbar
      v-model="active"
      active-color="#222831"
      inactive-color="#bdc1c9"
      placeholder
    >
      <van-tabbar-item name="main">
        <span>首页</span>
        <template #icon="props">
          <img
            :src="props.active ? icon.active : icon.inactive"
            style="height: 27px"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="books">
        <span>书城</span>
        <template #icon="props">
          <img
            :src="props.active ? icon.active2 : icon.inactive2"
            style="height: 27px"
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="me">
        <span>我的</span>
        <template #icon="props">
          <img
            :src="props.active ? icon.active3 : icon.inactive3"
            style="height: 27px"
          />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<style lang="scss">
.books {
  .search_max {
    // 搜索框
    height: 2.75rem;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    background-color: #fff;
    .search {
      height: 1.6875rem;
      display: flex;
      input {
        width: 17.5rem;
        border: none;
        background-color: #ccc;
        border-top-right-radius: 0.3125rem;
        border-bottom-right-radius: 0.3125rem;
        background-color: #f2f2f2;
        font-size: 0.875rem;
      }
      .search_icon {
        padding-left: 0.3125rem;
        padding-right: 0.3125rem;
        line-height: 1.5625rem;
        border-top-left-radius: 0.3125rem;
        border-bottom-left-radius: 0.3125rem;
        background-color: #f2f2f2;
        img {
          width: 0.875rem;
          height: 0.875rem;
        }
      }
    }
    .shopCart {
      margin-left: 0.875rem;
      img {
        width: 1.375rem;
        height: 1.375rem;
      }
    }
  }
  h2 {
    // 书城标题
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
    display: flex;
    margin: 0.9375rem 0 0.9375rem 0.9375rem;
  }
  .my-swipe {
    // 轮播图
    width: 21.5625rem;
    height: 7.9375rem;
    border-radius: 0.625rem;
    margin: 0 auto;
    .van-swipe-item {
      color: #fff;
      font-size: 1.25rem;
      line-height: 7.9375rem;
      text-align: center;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  //////////////////////////////////////////////
  a {
    color: black;
  }
  .div-2 .van-button:nth-child(1) {
    margin: 0 1.25rem 0 0.9375rem;
  }
  .div-1 .van-button:nth-child(2) {
    margin: 0 1.25rem;
  }
  .div-1 {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.9375rem;
    margin-bottom: 0.625rem;
  }
  .van-button {
    width: 4.375rem;
    background-color: #f2f2f2;
    border: 0;
    color: #222831;
    border-radius: 0.3125rem;
  }
  .div {
    width: 280px;
  }

  .xuan {
    width: 0.625rem;
    height: 0.75rem;
  }
  .jiake {
    width: 0.4375rem;
    height: 0.75rem;
    padding-left: 0.1875rem;
  }
  .van-tab {
    box-shadow: 0rem 0.0625rem 0.0625rem 0rem #ccc;
    margin-bottom: 0.0625rem;
  }
  .container {
    display: flex;
  }
  .row2-3 span:nth-child(2) {
    color: #222831;
    font-size: 1rem;
    font-weight: 700;
  }
  .row2-3 span:nth-child(1) {
    color: #c3c7cb;
    font-size: 0.5rem;
    padding-right: 0.3125rem;
  }
  .row2-2 div:nth-child(1) {
    color: #222831;
    font-size: 0.625rem;
    margin-right: 5.9375rem;
  }
  .row2-2 {
    display: flex;
    width: 100%;
  }
  .row2-1 {
    height: 2.8125rem;
    margin: 0.625rem 0 1.875rem 0;
    font-weight: 700;
  }
  .row {
    display: flex;
    height: 7.5rem;
    margin-top: 1.25rem;
  }
  .row1 img {
    width: 5.375rem;
    height: 5.375rem;
    padding-top: 0.3125rem;
  }
  .row1 {
    width: 5.375rem;
    height: 6.9375rem;
    margin-right: 0.625rem;
    box-shadow: 0.1875rem 0.3125rem 0.3125rem 0rem #ccc;
    border-radius: 0.3125rem;
    margin-left: 0.625rem;
  }
}
</style>
<script>
export default {
  data() {
    return {
      cats: [],
      actives: 0,
      show: false,
      api: [],
      active: "books",
      navactive: "2",
      icon: {
        active: "/tabbar-logo/home_01.png",
        inactive: "/tabbar-logo/home_02.png",
        active2: "/tabbar-logo/store_01.png",
        inactive2: "/tabbar-logo/store_02.png",
        active3: "/tabbar-logo/mine_01.png",
        inactive3: "/tabbar-logo/mine_02.png"
      },
      shan: []
    };
  },
  mounted() {
    // 发送http请求，返回轮播图图片数据
    this.axios.get("/second/carousel").then(result => {
      // console.log(result.data);
      // 数据存入cats
      let cats = result.data.data;
      this.cats = cats;
      // console.log(cats);
    });

    //发送http请求
    this.axios.get("/second/list").then(result => {
      let i = result.data.data;
      //  console.log(result)
      this.api = i;
    });
  },

  methods: {
    anlu(e) {
      let f = e.target.textContent;
      this.show = false;
      this.shan = this.api.filter(function(item, index) {
        return item.title.includes(f);
      });
    },

    showPopup() {
      this.show = true;
    },
    // 调用方法按价格排序
    asd() {
      this.api.sort(this.sortMethods("price"));
    },
    // 调用方法按销量排序
    xiao() {
      this.api.sort(this.sortMethods("orderNumber"));
    },
    // 排序方法
    sortMethods(property) {
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    },
    //路由跳转
    bookdetail(id) {
      if (this.$store.state.phoneState) {
        this.$router.push({
          path: `/bookdetail/${id}`
        });
      } else {
        this.$router.push(`/login`);
      }
    }
  },
  watch: {
    // 监听标间栏变化
    actives(nav) {
      if (nav == 0) {
        this.axios.get("/second/list").then(result => {
          let i = result.data.data;
          this.api = i;
        });
      } else if (nav == 1) {
        this.xiao();
      } else {
        this.asd();
      }
    },

    /** 监听底部选项卡的变化 */
    active(newval) {
      if (newval == "main") {
        this.$router.push("/"); //  路径 / 映射到Home.vue
      } else if (newval == "book") {
        this.$router.push("/books"); // 路径 /book 映射到Book.vue
      } else if (newval == "me") {
        this.$router.push("/me"); // 路径 /me 映射到Me.vue
      }
    }
  }
};
</script>
